<script setup>
import { ref } from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Switch from '@/components/base/Switch.vue'
import { onLoad } from '@dcloudio/uni-app'
import {
    getInstruction,
    updateInstruction,
    createInstruction,
} from '@/api/instruction'
import useLocale from '@/composables/useLocale'
import useLocaleNavigationBarTitle from '@/composables/useLocaleNavigationBarTitle'

const instructionId = ref(null)

const formData = ref({
    question: '',
    chatgptAnswer: '',
})

const enabled = ref(false)
const { t } = useLocale()

useLocaleNavigationBarTitle('customInstructions')

onLoad(async () => {
    // uni.showLoading()
    // const resp = await getInstruction()
    // uni.hideLoading()
    // if (resp.status === 200 && resp.data) {
        instructionId.value = resp.data?.id
        formData.value = {
            question: resp.data?.question,
            chatgptAnswer: resp.data?.chatgptAnswer,
        }
        enabled.value = resp.data?.status === 0
    // }
})
const fields = {
    question: {
        label: t('instructionContext'),
    },
    chatgptAnswer: {
        label: t('instructionResponse'),
    },
}

async function handleEnabledChange(val) {
    uni.showLoading({ mask: true })
    const resp = await updateInstruction({
        id: instructionId.value,
        status: val ? 0 : 1,
        ...formData.value,
    })
    uni.hideLoading()
    if (resp === true) {
        uni.showToast({
            title: val ? t('enabled') : t('disabled'),
            icon: 'none',
        })
    }
}

async function handleSubmit() {
    uni.showLoading({ mask: true })
    let resp
    if (instructionId.value) {
        resp = await updateInstruction({
            id: instructionId.value,
            ...formData.value,
            status: enabled.value ? 0 : 1,
        })
    } else {
        resp = await createInstruction({
            ...formData.value,
            status: enabled.value ? 0 : 1,
        })
    }
    uni.hideLoading()
    if (resp) {
        // uni.showToast({
        //     title: t('saveSuccess'),
        //     icon: 'none',
        // })
        
      const  routes = getCurrentPages(); 
      const maxIndex = routes.length - 1;
      const route = routes[maxIndex - 1]
      uni.navigateTo({ url: route.$page.fullPath })
    }
}
</script>

<template>
    <view class="flex justify-center px-4 pt-8">
        <view class="max-w-96">
            <view
                v-if="instructionId"
                class="flex items-center justify-between border-b border-solid border-zinc-100 pb-3"
            >
                <view>{{ t('isEnabled') }}</view>
                <Switch
                    v-model="enabled"
                    @update:model-value="handleEnabledChange"
                />
            </view>
            <view
                v-for="({ label }, name) in fields"
                :key="name"
                class="pb-3 pt-6"
            >
                <view class="mb-2">
                    {{ label }}
                </view>
                <input
                    v-model="formData[name]"
                    class="h-12 w-full rounded border border-solid border-zinc-600 px-3"
                    :placeholder="t('pleaseEnter')"
                />
            </view>
            <view class="text-xs text-zinc-600">
                {{ t('instructionTip') }}
            </view>
            <view class="mt-10 flex">
                <BaseButton @click="handleSubmit">{{ t('create') }}</BaseButton>
            </view>
        </view>
    </view>
</template>
